<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title title-color">各企业实习学生人数查看</h1>
		</header>

		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="chart" id="barChart"></div>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			var chartDiv = document.getElementById("barChart");
			chartDiv.style.width = document.body.offsetWidth + "px";
			chartDiv.style.height = document.body.offsetHeight - 50 + "px";
			var userinfo;
			mui.plusReady(function () {
				userinfo = app.getGlobalUserInfo();
			    loadE_namesAndIa_counts(); 
			});
			
			/**
			 * 加载当前教师所带学生所在各个企业的名称和实习人数
			 */
			function loadE_namesAndIa_counts() {
				// 教师和管理员能看到的统计结果不一样，索引请求数据的接口不一样
				// 管理员能看到所有学生的实习统计信息，而教师只能看到自己所带学生的实习统计信息
				var dataUrl = "/user/teacher/loadE_namesAndIa_countsByTeacher_id";
				if(userinfo.role_type == 1) {
					dataUrl = "/user/admin/loadE_namesAndIa_counts";
				}
				mui.ajax(app.serverUrl + dataUrl,{
					data:{
						user_id: userinfo.user_id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						if(data.status == 200) {
							var enterprises = data.data;
							// 格式化echarts数据
							var e_names = [];
							var ia_counts = [];
							for(var i = 0; i < enterprises.length; i++) {
								e_names.push(enterprises[i].e_name);
								if(app.isNotNull(enterprises[i].ia_count)) {
									ia_counts.push(enterprises[i].ia_count);
								} else {
									ia_counts.push(0);
								}
							}
							// 传入数据渲染图表
							renderChart(e_names, ia_counts);
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
			
			// renderChart(['北京红海无限科技', '速度中国', '国泰新点', '嘉环科技', '奇安信集团', '知道创宇'], [10, 8, 1, 9, 6, 3]);
			function renderChart(e_names, ia_counts) {
				var chartOption = {
					title : {
						text: '各企业实习学生人数',
						// subtext: 'xxx',
						x:'center',
					},
					legend: {
						data: ['学生数量'],
						x: "left"
					},
					grid: {
						top: "15%",
						width: "80%",
						left: "center"
					},
					xAxis: {
						type: 'category',
						data: e_names,
						show: true,
						position: 'bottom', //默认为bottom，可以设置为top
						name: '公司名称',
						nameLocation: 'end',	//坐标轴的位置，可以设置为start,middle|center，end
						nameGap: '30',		//坐标轴名称与坐标轴之间的空隙
						axisLine: {			//坐标轴轴线的相关设置
							show: true,
							lineStyle: {
								color: '#000',
								width: 1,
								type: 'solid',		//坐标轴轴线线的类型：可以设置为solid，dashed，dotted
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 10,
								shadowOffsetX: 5,
								shadowOffsetY: 5,
								opacity:0.5,
							},
							symbol: ['none', 'arrow'],
							symbolOffset: [0,10],
						},
					},
					tooltip : {
						trigger: 'item',
						formatter: function (params) {
							return '企业名称：' + params.name + '<br>' +
								   '实习学生人数：'+ params.value;
						}
					},
					yAxis: {
						type: 'value',
						splitArea: {
							show: true
						},
						show: true,
						axisLine: {			//坐标轴轴线的相关设置
							show: true,
							lineStyle: {
								color: 'black',
								width: 1,
								type: 'solid',		//坐标轴轴线线的类型：可以设置为solid，dashed，dotted
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 10,
								shadowOffsetX: 5,
								shadowOffsetY: 5,
								opacity:0.5,
							},
							symbol: ['none', 'arrow'],
							symbolOffset: [0,10],
						},
						position: 'bottom', //默认为bottom，可以设置为top
						name: '实习学生数量',
						nameLocation: 'end',	//坐标轴的位置，可以设置为start,middle|center，end
						nameGap: '30',		//坐标轴名称与坐标轴之间的空隙
					},
					series: {
						name: '学生数量',
						type: "bar",
						data: ia_counts
					}
				};
			
				var barChart = echarts.init(chartDiv);
				barChart.setOption(chartOption);
				
			}
		</script> 
	</body>
</html>